<!-- 项目审批 -->
<template>
	<view style="margin-bottom: 100rpx">
		<mescroll-uni  @init="mescrollInit" :down="downOption" @emptyclick="emptyClick" @down="downCallback" :up="upOption" @up="upCallback"
		 :fixed="false">
			<view class="mycard">
				<view v-for="item in cardList" :key="item.id" class="card-item" >
					<navigator :url="'/pages/workbench/alarm/alarmInfo?id=' + item.guid + '&type=' + item.taskType">
					<uni-card is-full :title="item.projectType" is-shadow note="true" :extra="item.createTime" :thumbnail="`/static/img/project/${formatProjectType(item.projectType)}`"
					 @tapHeader="clickCard(item)">
						<view class="audit-card-content">
							<view class="uni-flex uni-row" @tap="clickCard(item)">
								<view class="flex-item-20">站点名称</view>
								<view class="flex-item-80">{{item.siteName}}</view>
							</view>
							<view class="uni-flex uni-row" @tap="clickCard(item)">
								<view class="flex-item-20">运维人员</view>
								<view class="flex-item-80">{{item.shishirenName}}</view>
							</view>
							<view class="uni-flex uni-row" @tap="clickCard(item)">
								<view class="flex-item-20">人员电话</view>
								<view class="flex-item-80">{{item.shishirenTel}}</view>
							</view>
							<view class="uni-flex uni-row" @tap="clickCard(item)">
								<view class="flex-item-20">详情</view>
								<view class="flex-item-80">{{item.yunweiContent}}</view>
							</view>
							<view class="uni-flex uni-row" @tap="clickCard(item)">
								<view class="flex-item-20">结束时间</view>
								<view class="flex-item-80">{{item.zhidingEndTime}}</view>
							</view>
							<view class="uni-flex uni-row" @tap="clickCard(item)">
								<view class="flex-item-20">确定状态</view>
								<view class="flex-item-80">
									<uni-tag size="small" text="未确认" type="primary"
									 :circle="true"></uni-tag>
								</view>
							</view>
							<!-- <view class="uni-flex uni-row">
								<view class="flex-item-20">附件</view>
								<view class="flex-item-80">
									<view v-for="atta in item.attachment" :key="atta.url" @tap="filePreview(atta)">
										<uni-icons color="#007aff" type="paperclip" size="22"></uni-icons><text>{{atta.name}}</text>
									</view>
								</view>
							</view> -->
						</view>
					</uni-card>
					</navigator>
				</view>
			</view>
		</mescroll-uni>
		<audit-idea ref="popupAuditIdeaRef" :isPass="isPass" :isPaddingBottom="true" @updateQuery="updateQuery"></audit-idea>
	</view>
</template>

<script>
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue"
	import uniCard from "@/components/uni-card/uni-card"
	import uniTag from '@/components/uni-tag/uni-tag.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import auditIdea from './audit-idea.vue'
	import util from 'utils/util.js'
	import {
		getRandomArrayElements,
		filePreview,
		formatAuditStatus,
		formatProjectType
	} from '@/utils/index.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		components: {
			MescrollUni,
			uniCard,
			uniTag,
			uniIcons,
			auditIdea
		},
		data() {
			return {
				mescroll: null,
				isPass: false,
				selectedProject: {},
				// 下拉刷新的常用配置
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				// 上拉加载的常用配置
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					},
					toTop: {
						src: '/static/img/backtop.png'
					},
					textNoMore: '没有更多数据了'
				},
				pageInfo: {
				    total: 0,
				    page: 1,
				    limit: 10,
				},
				// 列表数据
				cardList: []
			}
		},
		methods: {
			filePreview,
			formatAuditStatus,
			formatProjectType,
			// mescroll组件初始化的回调,可获取到mescroll对象
			mescrollInit(mescroll) {
				// 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
				this.mescroll = mescroll
			},
			/*下拉刷新的回调, 有三种处理方式: */
			downCallback(mescroll) {
				// 第2种: 下拉刷新和上拉加载调同样的接口, 那以上请求可删, 直接用mescroll.resetUpScroll()代替
				mescroll.resetUpScroll() // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			/*上拉加载的回调*/
			upCallback(mescroll) {
				let userInfo = util.getUserInfo();
				if (!userInfo) {
					mescroll.endErr()
					return
				}
				this.pageInfo= {
					page: mescroll.num,
					limit: mescroll.size,
					opStatus:'new,see',
					shishirenId:userInfo.userId,
					taskType:'weixiu'
				}
				/**
				 * 查询新增维修列表
				 */
				util.request('/monitor/taskInfo/list', this.pageInfo, 'GET').then(res=>{
					//设置列表数据
					if(mescroll.num == 1) this.cardList = []; //如果是第一页需手动制空列表
					this.cardList=this.cardList.concat(res.data.records); //追加新数据
					// 方法一(推荐): 后台接口有返回列表的总页数 totalPage
					mescroll.endByPage(this.cardList.length, 3)
					this.$nextTick(() => {
						mescroll.endSuccess(this.cardList.length)
					})
				}).catch(()=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			clickCard(item) {
				uni.navigateTo({
					url: '/pages/index/project/detail-project?data=' + JSON.stringify(item)
				})
			},
			adjustClick(item) {
				uni.navigateTo({
					url: '/pages/index/project/adjust-project?data=' + JSON.stringify(item)
				})
			},
			passClick(item) {
				this.selectedProject = item
				this.$set(this.selectedProject,'opStatus','operating')
				this.$delete(this.selectedProject,'shenherenId')
				//更新任务状态为运维中
				util.request('/monitor/taskInfo/update', this.selectedProject, 'POST').then((res) => {
					uni.showModal({
						title: '提示',
						content: '任务进入待完成列表',
						showCancel: false,
						confirmText: '确定',
						success: res => {
							if (res.confirm) {
								this.downCallback(this.mescroll)
							}
						}
					})
					
				})
			},
			unPassClick(item) {
				this.selectedProject = item
				this.$set(this.selectedProject,'opStatus','back')
				this.$delete(this.selectedProject,'shenherenId')
				//
				//更新任务状态为退回back
				util.request('/monitor/taskInfo/update', this.selectedProject, 'POST').then((res) => {
					uni.showModal({
						title: '提示',
						content: '回退成功',
						showCancel: false,
						confirmText: '确定',
						success: res => {
							if (res.confirm) {
								this.downCallback(this.mescroll)
							}
						}
					})
					
				})
			},
			queryByName(name) {
				uni.showLoading({
					title: '正在查询数据...'
				})
				/**
				 * todo: api请求查询项目待办
				 */
				this.updateQuery()
				uni.hideLoading()

			},
			updateQuery() {
				this.downCallback(this.mescroll)
			},
		}
	}
</script>

<style>
	.mescroll-totop {
		opacity: 1 !important;
	}
</style>
